<style scoped lang="scss">
  .wrap {
    position: relative;

    .swiper {
      &-item {
        position: relative;

        &-img {
          width: 100%;
        }

        &-cover {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          @include cover-img();
        }
      }

    }

    .dot-list {
      display: flex;
      position: absolute;

      left: 50%;
      transform: translateX(-50%);

      .dot-item {
        width: 30rpx;
        height: 4rpx;
        margin-right: 6rpx;

        &:last-child {
          margin-right: 0;
        }

        &.active {
          //background: $fun-primary-color;
        }
      }
    }

    .dot-list-circle {
      display: flex;
      position: absolute;

      left: 50%;
      transform: translateX(-50%);

      .dot-item {
        width: 14rpx;
        height: 14rpx;
        border-radius: 50%;
        margin-right: 14rpx;
        &:last-child {
          margin-right: 0;
        }

        &.active {
          //background: $fun-primary-color;
        }
      }
    }
  }
</style>
<template>
  <div class="wrap">
    <u-swiper :list="imgList" :border-radius="borderRadius" :height="h"  @click="bindClick"></u-swiper>
<!--    <swiper-->
<!--      v-if="imgList.length>0"-->
<!--      :style="{width:w,height:h,padding:paddingStr}"-->
<!--      class="swiper"-->
<!--      @change="indexChangeEvent"-->
<!--      :indicator-dots="indicatorDots==='circle'"-->
<!--      :indicator-color="dotsColor"-->
<!--      :indicator-active-color="dotsActiveColor"-->
<!--      :autoplay="autoplay"-->
<!--      :circular="circular"-->
<!--      :interval="interval"-->
<!--      :duration="duration">-->
<!--      <swiper-item class="swiper-item" v-for="(img,idx) in imgList" :key="idx" @click="bindClick(idx)">-->
<!--&lt;!&ndash;        <image @load="handleImgLoad" :id="'img'+idx" mode="widthFix" class="swiper-item-img" :src="img"></image>&ndash;&gt;-->
<!--        <div class="swiper-item-cover" :style="{width:itemWidth,height:itemHeight,backgroundImage:'url('+img+')'}"></div>-->
<!--      </swiper-item>-->
<!--    </swiper>-->
<!--    <div class="dot-list-circle" :style="{bottom:dotBottom}" v-if="indicatorDots==='diycircle'">-->
<!--        <span-->
<!--          v-for="(img,idx) in imgList"-->
<!--          :key="idx"-->
<!--          class="dot-item"-->
<!--          :class="{active:current===idx}"-->
<!--          :style="{backgroundColor:current===idx?dotsActiveColor:dotsColor}"></span>-->
<!--    </div>-->
<!--    <div class="dot-list" :style="{bottom:dotBottom}" v-if="indicatorDots==='line'">-->
<!--        <span-->
<!--          v-for="(img,idx) in imgList"-->
<!--          :key="idx"-->
<!--          class="dot-item"-->
<!--          :class="{active:current===idx}"-->
<!--          :style="{backgroundColor:current===idx?dotsActiveColor:dotsColor}"></span>-->
<!--    </div>-->
  </div>
</template>
<script>
import { ad } from '@/api'
import { getArrColumn, getDomain } from '@/common/helper'
import { linkToEasy } from '@/common/fun'
import { Exception } from '@/common/Exception'
import USwiper from '@/uview-ui/components/u-swiper/u-swiper'

export default {
  name: 'LayoutAd',
  components: { USwiper },
  props: {
    borderRadius: {
      type: [Number, String],
      default: 8
    },
    mode: {
      type: String,
      default: 'online'
    },
    imgs: {
      type: Array,
      default: () => []
    },
    lazyLoad: {
      type: Boolean,
      default: false
    },
    ready: {
      type: Boolean,
      default: false
    },
    paddingStr: {
      type: String,
      default: '0px'
    },
    boxDidth: {
      default: 750,
      type: Number
    },
    dotBottom: {
      default: '20rpx',
      type: String
    },
    height: {
      default: 250,
      type: Number
    },
    itemWidth: {
      default: '750rpx',
      type: String
    },
    itemHeight: {
      default: '250rpx',
      type: String
    },
    indicatorDots: {
      type: [Boolean, String],
      default: false
    },
    circular: {
      default: true,
      type: Boolean
    },
    vertical: {
      default: false
    },
    autoplay: {
      default: false
    },
    dotsColor: {
      default: 'rgba(0,0,0,.3)'
    },
    dotsActiveColor: {
      default: '#26C78D'
    },
    interval: {
      default: 5000
    },
    duration: {
      default: 500
    },
    position: {
      default: '',
      type: String
    },
    cateId: {
      default: '',
      type: String
    },
    pid: {
      default: '',
      type: [String, Number]
    }
  },
  computed: {
    w () {
      return '750rpx'
      // try {
      //   return this.boxw[this.current]
      // } catch (e) {
      //   return this.width
      // }
    },
    h () {
      return this.height
      // try {
      //   return this.boxh[this.current]
      // } catch (e) {
      //   return this.height
      // }
    }
  },
  data () {
    return {
      boxw: [],
      boxh: [],
      urls: [],
      place: {},
      imgList: [],
      current: 0
    }
  },
  watch: {
    ready: {
      handler (val, oldVal) {
        if (val && !oldVal) this._init_func()
      }
    }
  },
  created () {
    if (!this.lazyLoad) {
      this._init_func()
    }
  },
  methods: {
    async _init_func () {
      console.log('layout-ad init_func')
      if (this.imgs.length < 1) {
        try {
          if (!this.pid) throw Error('广告位的imgs长度为0是，请传入code或者（cateId+position的搭配）')
          const postData = { pid: this.pid }

          const { lists: imgs, place } = await ad({ ...postData }, { onlyData: true }).catch(err => { throw Error(err.msg || '初始化广告组件失败') })
          this.imgList = getArrColumn(imgs, 'image_src').map(img => {
            return { image: img }
          })
          this.urls = getArrColumn(imgs, 'image_url')
          this.place = place
        } catch (e) {
          Exception.handle(e)
        }
      } else {
        this.imgList = this.imgs.map(img => {
          return { image: img }
        })
      }

      console.log('this imgList is',this.imgList)
    },
    bindClick (idx) {

      if (!this.pid) return
      if (this.urls[idx]) {
        console.log(this.urls[idx])
        const link = this.urls[idx]
        if (link) linkToEasy(link)
      }
    },
    handleImgLoad (e) {
      const { width, height } = e.detail

      const idx = e.target.id.replace('img', '')

      this.$set(this.boxw, idx, this.boxDidth + 'rpx')
      this.$set(this.boxh, idx, this.boxDidth * height / width + 'rpx')

      // console.log(this.boxh, this.boxw)
    },
    indexChangeEvent (event) {
      const { current } = event.detail
      this.current = current
    }
  }
}
</script>
